<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>pc项目</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body style="height: 1000px">
    <!--包裹器   整个页面的容器-->
    <div class="wrap">
      <!--窗口侧边栏-->
      <div class="toolBar toolWrap">
        <!--内容容器-->
        <div class="content"></div>
        <!--面包屑-->
        <div class="but list"></div>
        <!--中间列表-->
        <ul class="toolList">
          <li>
            <i class="tabIcon vip"></i>
            <em>尚品汇员</em>
          </li>
          <li>
            <i class="tabIcon cart"></i>
            <em>购物车</em>
          </li>
          <li>
            <i class="tabIcon follow"></i>
            <em>我的关注</em>
          </li>
          <li>
            <i class="tabIcon history"></i>
            <em>历史记录</em>
          </li>
          <li>
            <i class="tabIcon message"></i>
            <em>消息</em>
          </li>
          <li>
            <i class="tabIcon qus"></i>
            <em>咨询</em>
          </li>
        </ul>
        <!--回到顶部-->
        <div class="back">
          <i class="tabIcon"></i>
          <em></em>
        </div>
      </div>
      <!-- 头部区域 -->
      <header class="header">
        <!--头部第一行-->
        <div class="top">
          <div class="container">
            <!--登录-->
            <div class="login">
              <p>尚品汇欢迎您！</p>
              <p>
                <span>请</span>
                <a href="###">登录</a>
                <a href="###" class="register">免费注册</a>
              </p>
            </div>
            <!--头部导航-->
            <div class="headerNav">
              <a href="###">我的订单</a>
              <a href="###">我的购物车</a>
              <a href="###">我的尚品汇</a>
              <a href="###">尚品汇会员</a>
              <a href="###">企业采购</a>
              <a href="###">关注尚品汇</a>
              <a href="###">合作招商</a>
              <a href="###">商家后台</a>
            </div>
          </div>
        </div>
        <!--头部第二行-->
        <div class="bottom">
          <h1 class="logoArea">
            <a href="###">
              <img src="img/Logo.png" alt="尚品汇" />
            </a>
          </h1>
          <div class="searchArea">
            <form action="">
              <input type="text" />
              <button>搜索</button>
            </form>
          </div>
        </div>
      </header>
      <!--商品导航分类-->
      <div class="typeNav">
        <div class="container">
          <h2 class="all">全部商品分类</h2>
          <nav>
            <a href="###">服装城</a>
            <a href="###">美妆馆</a>
            <a href="###">尚品汇超市</a>
            <a href="###">全球购</a>
            <a href="###">闪购</a>
            <a href="###">团购</a>
            <a href="###">有趣</a>
            <a href="###">秒杀</a>
          </nav>
        </div>
      </div>
      <!--商品主要内容区域-->
      <section class="con">
        <!--路径导航-->
        <div class="conPoin">
          <!-- <a href="###">手机、数码、通讯</a>
        <a href="###">手机</a>
        <a href="###">Apple苹果</a>
        <a>iphone 6S系类</a> -->
        </div>
        <!--主要内容区域-->
        <div class="mainCon">
          <!--左侧放大镜-->
          <div class="previewWrap">
            <!--放大镜效果-->
            <div class="preview">
              <!--小图-->
              <div class="zoom">
                <!-- <img src="img/s1.png" alt=""> -->
              </div>
              <!--大图-->
            </div>
            <!--缩略图效果-->
            <div class="specScroll">
              <a class="prev">&lt;</a>
              <div class="itemCon">
                <ul class="list">
                  <!-- <li><img src="img/s1.png" alt=""></li>
                <li><img src="img/s2.png" alt=""></li>
                <li><img src="img/s3.png" alt=""></li>
                <li><img src="img/s1.png" alt=""></li>
                <li><img src="img/s2.png" alt=""></li>
                <li><img src="img/s3.png" alt=""></li>
                <li><img src="img/s1.png" alt=""></li>
                <li><img src="img/s2.png" alt=""></li> -->
                </ul>
              </div>
              <a class="next">&gt;</a>
            </div>
          </div>
          <!--右侧商品信息-->
          <div class="infoWrap">
            <div class="info1"></div>
            <div class="choose">
              <div class="chooseArea">
                <div class="choosed"></div>
              </div>
              <div class="carWrap">
                <div class="controls">
                  <input type="text" value="1" />
                  <a href="###" class="plus">+</a>
                  <a href="###" class="mins">-</a>
                </div>
                <div class="addBtn">
                  <a href="###">加入购物车</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--商品详情页-->
      <section class="productDetail">
        <!--侧边栏-->
        <aside class="aside">
          <!--选项卡切换的按钮-->
          <div class="tabWrap">
            <h4 class="active">相关分类</h4>
            <h4>推荐品牌</h4>
          </div>
          <!--选项卡内容-->
          <div class="tabContent">
            <div class="active">
              <ul class="partList">
                <li>手机</li>
                <li>手机壳</li>
                <li>内存卡</li>
                <li>iphone配件</li>
                <li>贴膜</li>
                <li>手机耳机</li>
                <li>移动电源</li>
                <li>平板电脑</li>
              </ul>
              <ul class="goodsList">
                <li>
                  <div class="gImg">
                    <img src="img/part01.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
                <li>
                  <div class="gImg">
                    <img src="img/part02.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
                <li>
                  <div class="gImg">
                    <img src="img/part03.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
                <li>
                  <div class="gImg">
                    <img src="img/part01.png" alt="" />
                  </div>
                  <p class="attr">Apple苹果iPhone 6s (A1699)</p>
                  <p class="price">¥6088.00</p>
                  <div class="addCar">
                    <a href="###">加入购物车</a>
                  </div>
                </li>
              </ul>
            </div>
            <div>推荐品牌</div>
          </div>
        </aside>
        <div class="detail">
          <div class="fitting">
            <h4>选择搭配</h4>
            <div class="goodSuits">
              <div class="master">
                <img src="img/l-m01.png" alt="" />
                <p>¥5299</p>
                <i>+</i>
              </div>
              <ul class="suits">
                <li class="suitsItem">
                  <img src="img/dp01.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="img/dp02.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="img/dp03.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
                <li class="suitsItem">
                  <img src="img/dp04.png" alt="" />
                  <p>Feless费勒斯VR</p>
                  <label>
                    <input type="checkbox" value="39" />
                    <span>39</span>
                  </label>
                </li>
              </ul>
              <div class="result">
                <div>已选购0件商品</div>
                <p class="price-tit">套餐价</p>
                <p class="price">¥5299</p>
                <button>加入购物车</button>
              </div>
            </div>
          </div>
          <div class="intro">
            <ul class="tabWrap">
              <li class="active"><a href="###">商品介绍</a></li>
              <li><a href="###">规格与包装</a></li>
              <li><a href="###">售后保障</a></li>
              <li><a href="###">商品评价</a></li>
              <li><a href="###">手机社区</a></li>
            </ul>
            <div class="tabContent">
              <div class="active">
                <ul class="goodsIntro">
                  <li>分辨率：1920*1080(FHD)</li>
                  <li>后置摄像头：1200万像素</li>
                  <li>前置摄像头：500万像素</li>
                  <li>核 数：其他</li>
                  <li>频 率：以官网信息为准</li>
                  <li>品牌： Apple</li>
                  <li>商品名称：APPLEiPhone 6s Plus</li>
                  <li>商品编号：1861098</li>
                  <li>商品产地：中国大陆</li>
                  <li>商品毛重：0.51kg</li>
                  <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                </ul>
                <div class="introImg">
                  <img src="img/intro01.png" alt="" />
                  <img src="img/intro02.png" alt="" />
                  <img src="img/intro03.png" alt="" />
                </div>
              </div>
              <div>规格与包装</div>
              <div>售后保障</div>
              <div>商品评价</div>
              <div>手机社区</div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- 引入数据得js -->
    <script src="./js/data.js"></script>
    <script>
      window.addEventListener('DOMContentLoaded', function () {
        var imgIndex = 0
        var changePriceNum = 1

        // 咱们会把每一个功能单独封装为一个函数

        // 放大镜
        magnifier()

        function magnifier() {
          // 获取放大镜区域容器
          var preview = document.querySelector(
            '.wrap .con .mainCon .previewWrap .preview'
          )
          // 获取小图容器
          var smallWrap = document.querySelector(
            '.wrap .con .mainCon .previewWrap .preview .zoom'
          )
          // 根据数据来动态渲染小图的路径
          var data = goodData.imgsrc[0].s
          // var img = smallWrap.querySelector('img')s  //dom对象可以使用查找元素得方法
          var imgNode = document.createElement('img')
          imgNode.src = data
          smallWrap.appendChild(imgNode)
          // 初始化蒙版 大图容器 大图
          var mask = null
          var bigBox = null
          var bigImg = null
          // 绑定移入事件 让蒙版创建出来
          preview.onmouseenter = function () {
            // 没有蒙版得时候再去创建蒙版  没有蒙版得时候一定没有大图和大图容器
            if (!mask) {
              mask = document.createElement('div')
              mask.classList.add('mask')
              smallWrap.appendChild(mask)
              // 创建大图容器和大图插入到preview中
              bigBox = document.createElement('div')
              bigBox.classList.add('bigBox')
              // bigImg = document.createElement('img')
              bigImg = new Image()
              bigImg.src = goodData.imgsrc[imgIndex].b
              bigBox.appendChild(bigImg)
              preview.appendChild(bigBox)
            }
            // 绑定移动事件
            smallWrap.onmousemove = function (e) {
              // 蒙版得移动位置 = 鼠标距离视口得位置 - 蒙版宽度得一半 -小图容器距离视口得纯净距离
              var maskPosition = {
                left:
                  e.clientX -
                  mask.offsetWidth / 2 -
                  smallWrap.getBoundingClientRect().left,
                top:
                  e.clientY -
                  mask.offsetHeight / 2 -
                  smallWrap.getBoundingClientRect().top,
              }
              // 边界值判断
              if (maskPosition.left < 0) {
                //左边界
                maskPosition.left = 0
              } else if (
                maskPosition.left >
                smallWrap.clientWidth - mask.offsetWidth
              ) {
                //右边界
                maskPosition.left = smallWrap.clientWidth - mask.offsetWidth
              }
              if (maskPosition.top < 0) {
                //上边界
                maskPosition.top = 0
              } else if (
                maskPosition.top >
                smallWrap.clientHeight - mask.offsetHeight
              ) {
                //下边界
                maskPosition.top = smallWrap.clientHeight - mask.offsetHeight
              }
              // 赋值 让蒙版动起来
              mask.style.left = maskPosition.left + 'px'
              mask.style.top = maskPosition.top + 'px'
              // 求大图移动距离  算比例
              // 蒙版可移动距离 / 大图可移动距离 == 蒙版移动得距离 / 大图移动得距离
              // 小图容器得宽-蒙版得宽  / 大图得宽-大图容器得宽
              var scale =
                (smallWrap.clientWidth - mask.offsetWidth) /
                (bigImg.clientWidth - bigBox.offsetWidth)
              var bigImgPosition = {
                left: maskPosition.left / scale,
                top: maskPosition.top / scale,
              }
              // 赋值 让大图跟蒙版去动
              bigImg.style.left = -bigImgPosition.left + 'px'
              bigImg.style.top = -bigImgPosition.top + 'px'
            }
            // 绑定移出事件
            preview.onmouseleave = function () {
              // 清除咱们得蒙版节点
              smallWrap.removeChild(mask)
              // 删除大图容器 容器删除了 里面得大图就没了
              preview.removeChild(bigBox)
              // 初始化
              mask = null
              // bigBox = null
              // bigImg = null
              // 清除事件
              smallWrap.onmousemove = preview.onmouseleave = null
            }
          }
        }

        // 缩略图
        thumbnail()

        function thumbnail() {
          // 获取ul
          var list = document.querySelector(
            '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list'
          )
          // 获取缩略图得数据  不要写在下面 因为下面再获取li  但是再获取之前页面没有li
          goodData.imgsrc.forEach(function (item, index) {
            var liNode = document.createElement('li')
            var imgNode = new Image() //也会返回一个图片得节点
            imgNode.src = item.s
            liNode.appendChild(imgNode)
            list.appendChild(liNode)
          })
          // 获取所有得li 不要去获取li里面img  因为外边距再li身上
          var liNodes = document.querySelectorAll(
            '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list li'
          )
          // 左右按钮获取
          var prev = document.querySelector(
            '.wrap .con .mainCon .previewWrap .specScroll .prev'
          )
          var next = document.querySelector(
            '.wrap .con .mainCon .previewWrap .specScroll .next'
          )
          // 默认显示得图片张数
          var imgNum = 5
          // li得右边距   window.getComputedStyle 可以获取某个dom对象计算之后得样式  返回一个对象
          var liMarginRight = parseInt(
            window.getComputedStyle(liNodes[0]).marginRight
          )
          // 可以移动得总距离  (总的图片张数-默认显示得图片张数)*(li自身得宽度+li得右边距)
          var allMoveDis =
            (liNodes.length - imgNum) * (liNodes[0].offsetWidth + liMarginRight)
          // 每次移动得距离 （li得宽+li得右边距）* 2
          var stepDis = (liNodes[0].offsetWidth + liMarginRight) * 2

          // 走过得距离
          var passDis = 0
          // 点击右边按钮
          next.onclick = function () {
            // 走过的距离小于可以移动得总距离  可以走
            if (passDis < allMoveDis) {
              // 剩余距离如果大于每次可以移动得距离  走每次可以移动得距离
              // 剩余距离如果小于每次可以移动得距离  走剩余距离
              if (allMoveDis - passDis > stepDis) {
                passDis += stepDis
              } else {
                passDis += allMoveDis - passDis
              }
              list.style.left = -passDis + 'px'
            }
          }
          // 点击左边按钮
          prev.onclick = function () {
            // 走过的距离大于0(说明之前往右边走过)  可以走
            if (passDis > 0) {
              // 走过的距离大于每次可以移动得距离 走每次移动得距离
              if (passDis > stepDis) {
                passDis -= stepDis
              } else {
                //走过的距离小于每次可以移动得距离  走剩余距离(直接为0)
                passDis = 0
              }
            }
            list.style.left = -passDis + 'px'
          }
        }

        // 缩略图图片点击
        thumbnailImgClick()

        function thumbnailImgClick() {
          // 拿所有的缩略图图片
          var imgNodes = document.querySelectorAll(
            '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list li img'
          )
          // 获取小图
          var smallImg = document.querySelector('.zoom img')
          // 获取大图
          var bigImg = document.querySelector('.bigBox img')
          for (var i = 0; i < imgNodes.length; i++) {
            imgNodes[i].index = i
            imgNodes[i].onclick = function () {
              // 取到当前的缩略图src赋值给小图的src
              smallImg.src = this.src
              // bigImg.src = this.src  //你点击缩略图的时候 页面还没有大图 因为你没有移入放大镜区域
              // this.index 就是点击的某个缩略图图片的下标
              imgIndex = this.index
            }
          }
        }

        // 路径导航根据数据动态渲染
        pathRende()

        function pathRende() {
          // 拿到路径得数据
          var pathData = goodData.path
          // 获取路径得容器
          var pathWrap = document.querySelector('.wrap .con .conPoin')
          // 遍历数据 创建a标签
          pathData.forEach(function (item, index) {
            var aNode = document.createElement('a')
            aNode.innerHTML = item.title
            // 最后一个不加href属性
            if (index !== pathData.length - 1) {
              //走进来得说明一定不是最后一个
              aNode.href = item.url
            }
            pathWrap.appendChild(aNode)
          })
        }

        // 商品内容
        goodContent()

        function goodContent() {
          // 拿到想要遍历的数据
          var data = goodData.goodsDetail.crumbData
          // 拿到父节点
          var area = document.querySelector(
            '.wrap .con .mainCon .infoWrap .choose .chooseArea'
          )
          // 遍历数据 创建对应的节点 然后放在页面中
          data.forEach(function (item, index) {
            var dlNode = document.createElement('dl')
            var dtNode = document.createElement('dt')
            dtNode.innerHTML = item.title
            dlNode.appendChild(dtNode)
            // 生成dl当中对应的dd
            item.data.forEach(function (item, index) {
              var ddNode = document.createElement('dd')
              ddNode.innerHTML = item.type
              // 给dd增加自定义属性 保存他的增加或减价
              ddNode.setAttribute('price', item.changePrice)
              dlNode.appendChild(ddNode)
              // area.appendChild(dlNode)
            })
            // 把dl放到树上
            area.appendChild(dlNode)
          })

          // 完成dd点击变色及保留筛选条件

          // 获取所有的dl
          var dlNodes = document.querySelectorAll(
            '.wrap .con .mainCon .infoWrap .choose .chooseArea dl'
          )
          // 生成一个长度为4的数组 如果回头有需要 可以从数组当中保留筛选条件或者读取条件
          var arr = new Array(4)
          // 把数组当中所有的内容填充为0  fill数组填充
          arr.fill(0)
          for (var i = 0; i < dlNodes.length; i++) {
            // 给每一个dl增加他的下标  保留筛选条件的那个数组下标和dl的下标有对应关系
            dlNodes[i].index = i
            ;(function () {
              // 获取某个dl下面所有的dd
              var someDlFloorDd = dlNodes[i].querySelectorAll('dd')
              // 给dd绑定点击事件
              for (var j = 0; j < someDlFloorDd.length; j++) {
                someDlFloorDd[j].onclick = function () {
                  // 改所有dd的颜色 #666
                  for (var i = 0; i < someDlFloorDd.length; i++) {
                    someDlFloorDd[i].style.color = '#666'
                  }
                  // 找到当前这个点击的dd 字体颜色改编成红色
                  this.style.color = 'red'
                  // 给数组当中对应下标添加点击dd的内容
                  arr[this.parentNode.index] = this
                  computedPrice(arr)
                  // console.log(arr)

                  // 根据数组生成结构的逻辑
                  // 父容器拿到
                  var chooseWrap = document.querySelector(
                    '.wrap .con .mainCon .infoWrap .choose .chooseArea .choosed'
                  )
                  // 在每一次创建之前 你应该清除掉之前的内容
                  chooseWrap.innerHTML = ''
                  // 遍历保存筛选条件的数组 生成对应结构
                  arr.forEach(function (item, index) {
                    // 看数组当中某一项是不是0  不是0再去创建结构
                    if (item) {
                      var markNode = document.createElement('mark')
                      markNode.innerHTML = item.innerHTML
                      var aNode = document.createElement('a')
                      aNode.innerHTML = 'X'
                      // 给a标签身上增加自定义属性 保存数组当中的下标
                      aNode.setAttribute('arrIndex', index)
                      markNode.appendChild(aNode)
                      chooseWrap.appendChild(markNode)
                    }
                  })

                  // 删除筛选条件
                  var aNodes = document.querySelectorAll(
                    '.wrap .con .mainCon .infoWrap .choose .chooseArea .choosed mark a'
                  )
                  // 每一个增加点击事件
                  for (var i = 0; i < aNodes.length; i++) {
                    aNodes[i].onclick = function () {
                      this.parentNode.parentNode.removeChild(this.parentNode)
                      // 拿到数组的那个下标 这个下标也就是dl的下标
                      var num = this.getAttribute('arrIndex')
                      // 拿到所有的dl
                      var dlNodes = document.querySelectorAll(
                        '.wrap .con .mainCon .infoWrap .choose .chooseArea dl'
                      )
                      // 找对应的那一个dl
                      var dlNode = dlNodes[num]
                      // 找这个dl里面所有的dd
                      var ddNodes = dlNode.querySelectorAll('dd')
                      for (var i = 0; i < ddNodes.length; i++) {
                        ddNodes[i].style.color = '#666'
                      }
                      // 找到某个dl当中的第一个dd  变成红色
                      dlNode.children[1].style.color = 'red'
                      // 筛选条件删除后 把那个数组当中的值也删除掉
                      arr[num] = 0
                      // 调用计算价钱的函数
                      computedPrice(arr)
                    }
                  }
                }
              }
            })()
          }

          // 因为只要数组发生变化(新增 修改 删除)  那么价钱就得重新计算 所以封装函数
          // arr 就是变化之后的那个最新状态的数组
          function computedPrice(arr) {
            // 价钱容器
            var priceWrap = document.querySelector(
              '.wrap .con .mainCon .infoWrap .info1 .priceArea .priceArea1 .price em'
            )
            // 获取默认价钱
            var defaultPrice = goodData.goodsDetail.price * changePriceNum
            // 遍历数组 累加每个增加或减价
            arr.forEach(function (item, index) {
              if (item) {
                var changePrice =
                  parseInt(item.getAttribute('price')) * changePriceNum
                defaultPrice += changePrice
              }
            })
            priceWrap.innerHTML = defaultPrice

            // 搭配的默认价钱和筛选条件的逻辑
            // 默认价钱容器获取
            var choosePriceWrap = document.querySelector(
              '.wrap .productDetail .detail .fitting .goodSuits .master p'
            )
            // 默认价钱
            var defaultPrice1 = goodData.goodsDetail.price
            arr.forEach(function (item, index) {
              if (item) {
                var changePrice = parseInt(item.getAttribute('price'))
                defaultPrice1 += changePrice
              }
            })
            // 搭配默认价钱赋值
            choosePriceWrap.innerHTML = '￥' + defaultPrice1
            // 搭配总价
            // 最终价钱容器
            var lastPriceWrap = document.querySelector(
              '.wrap .productDetail .detail .fitting .goodSuits .result .price'
            )
            // 所有的input
            var inps = document.querySelectorAll(
              '.wrap .productDetail .detail .fitting .goodSuits .suits input'
            )
            for (var i = 0; i < inps.length; i++) {
              // 只有为真的时候假
              if (inps[i].checked) {
                defaultPrice1 += parseInt(inps[i].value)
              }
            }
            // 赋值
            lastPriceWrap.innerHTML = '￥' + defaultPrice1
          }
        }

        // 商品内容详情根据数据动态渲染(模板字符串 ES6)
        // 反引号 支持换行  不需要咱们自己在拼接字符串 他当中提供一个了语法${} 花括号当中去当值你的变量或者对象的属性就可以
        goodDetailRender()

        function goodDetailRender() {
          // 父容器
          var detailWrap = document.querySelector(
            '.wrap .con .mainCon .infoWrap .info1'
          )
          detailWrap.innerHTML = `
        <h3 class="infoName">${goodData.goodsDetail.title}</h3>
            <p class="news">${goodData.goodsDetail.recommend}</p>
            <div class="priceArea">
              <div class="priceArea1">
                <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                <div class="price">
                  <i>￥</i>
                  <em>${goodData.goodsDetail.price}</em>
                  <span>降价通知</span>
                </div>
                <div class="remark">
                  <i>累计评价</i>
                  <span>${goodData.goodsDetail.evaluateNum}</span>
                </div>
              </div>
              <div class="priceArea2">
                <div class="title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</div>
                <div class="fixWidth">
                  <i>${goodData.goodsDetail.promoteSales.type}</i>
                  <span>${goodData.goodsDetail.promoteSales.content} </span>
                </div>
              </div>
            </div>
            <div class="support">
              <div>
                <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                <div class="fixWidth">${goodData.goodsDetail.support}</div>
              </div>
              <div>
                <div class="title">配&nbsp;送&nbsp;至</div>
                <div class="fixWidth">${goodData.goodsDetail.address}</div>
              </div>
            </div>
        
        
        `
        }

        // 数量增减
        goodNumUpdate()

        function goodNumUpdate() {
          // 拿input 还右加减按钮
          var inp = document.querySelector(
            '.wrap .con .mainCon .infoWrap .choose .carWrap .controls > input'
          )
          var plus = document.querySelector(
            '.wrap .con .mainCon .infoWrap .choose .carWrap .controls .plus'
          )
          var mins = document.querySelector(
            '.wrap .con .mainCon .infoWrap .choose .carWrap .controls .mins'
          )
          // var num = 1
          // 默认价钱的容器
          var defaultPriceWrap = document.querySelector(
            '.wrap .con .mainCon .infoWrap .info1 .priceArea .priceArea1 .price em'
          )
          // 点击增加的按钮
          plus.onclick = function () {
            changePriceNum++
            inp.value = changePriceNum
            // 获取价钱
            // 最新的价钱 == (之前的总价/之前的数量)  * 现在最新的数量
            var defaultPrice =
              (defaultPriceWrap.innerHTML / (changePriceNum - 1)) *
              changePriceNum
            // 然后赋值
            defaultPriceWrap.innerHTML = defaultPrice
          }
          // 点击减少的按钮
          mins.onclick = function () {
            // if判断 如果里面只有一行代码 可以把花括号去掉 把哪一行代码写在后面 中间记得加空格
            if (changePriceNum == 1) return
            changePriceNum--
            inp.value = changePriceNum
            // 最新的价钱 == (之前的总价/之前的数量)  * 现在最新的数量
            var defaultPrice =
              (defaultPriceWrap.innerHTML / (changePriceNum + 1)) *
              changePriceNum
            // 然后赋值
            defaultPriceWrap.innerHTML = defaultPrice
          }
        }

        // 搭配价钱
        choosePrice()

        function choosePrice() {
          // 默认价钱容器获取
          var choosePriceWrap = document.querySelector(
            '.wrap .productDetail .detail .fitting .goodSuits .master p'
          )

          // 所有的input
          var inps = document.querySelectorAll(
            '.wrap .productDetail .detail .fitting .goodSuits .suits input'
          )
          // 最终价钱容器
          var lastPriceWrap = document.querySelector(
            '.wrap .productDetail .detail .fitting .goodSuits .result .price'
          )
          // 绑定事件
          for (var i = 0; i < inps.length; i++) {
            inps[i].onclick = function () {
              // 获取默认价钱  记得那个符号不要  转数字 不然回头就是字符串拼接了！！！
              var choosePrice1 = parseInt(choosePriceWrap.innerHTML.substr(1))
              // 判断是不是选中的 checked为true的  才去加他的价钱
              if (this.checked) {
                //this.value 就是那个搭配的某个价钱 但是时字符串格式 所以要转数字 不然又是字符串拼接了
                choosePrice1 += parseInt(this.value)
              } else {
                //又不选中了
                choosePrice1 -= parseInt(this.value)
              }
              // 最终价钱容器去赋值
              lastPriceWrap.innerHTML = '￥' + choosePrice1
            }
          }
        }

        // 面包屑
        crumbs()

        function crumbs() {
          // 获取按钮
          var btn = document.querySelector('.wrap .toolBar .but')
          // 获取最外层容器
          var wrap = document.querySelector('.wrap .toolBar')
          // 定义一个开关
          var flag = true //默认不展开
          // 所有的li获取到
          var liNodes = document.querySelectorAll('.wrap .toolBar .toolList li')
          // 所有的i获取到
          var iNodes = document.querySelectorAll(
            '.wrap .toolBar .toolList li i'
          )
          // 所有的em获取到
          var emNodes = document.querySelectorAll(
            '.wrap .toolBar .toolList li em'
          )
          btn.onclick = function () {
            if (flag) {
              // 最外层容器展开 类名从wrap这个变成Out这个
              wrap.className = 'toolBar toolOut'
              // 改变自身按钮的类名 展开时cross
              this.classList.add('cross')
              this.classList.remove('list')
            } else {
              // 最外层容器收回去 类名从out变成wrap
              wrap.classList.remove('toolOut')
              wrap.classList.add('toolWrap')
              // 改变自身按钮的类名 展开时list
              this.classList.remove('cross')
              this.classList.add('list')
            }
            flag = !flag
          }
          // 给每个li绑定移入移出事件
          for (var i = 0; i < liNodes.length; i++) {
            // 给每个li增加下标
            liNodes[i].index = i
            liNodes[i].onmouseenter = function () {
              iNodes[this.index].style.backgroundColor = 'rgb(200,17,34)'
              emNodes[this.index].style.left = '-62px'
            }
            liNodes[i].onmouseleave = function () {
              iNodes[this.index].style.backgroundColor = '#7a6e6e '
              emNodes[this.index].style.left = '35px'
            }
          }
        }
      })
    </script>
  </body>
</html>
